<template>
  <div style="width: 100%">
    <div class="flex-row-start" style="width: 100%;margin: 10px">
      <el-button @click="handleClickInsert" type="primary">添加</el-button>
    </div>
    <el-table
    :data="permissionList"
    border
    style="width: 100%">
    <el-table-column

        prop="permission"
        label="标识符"
        >
    </el-table-column>
      <el-table-column

          prop="permissionName"
          label="权限名"
          >
      </el-table-column>
      <el-table-column prop="isDelete" label="开启状态" >
        <template slot-scope="scope">
          <el-switch active-text="开启"
                     inactive-text="关闭"
                     :active-value="0"
                     :inactive-value="1" v-model="scope.row.isDelete" ></el-switch>
        </template>
      </el-table-column>

    <el-table-column

        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="handleClickEditor(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>


    <el-dialog width="500px" title="添加权限" :visible.sync="showForm" v-loading="insertLoading">
      <el-form ref="form" :model="pForm" label-width="50px">
        <el-form-item label="权限标识符" label-width="120px" prop="permission">
          <el-input prefix-icon="el-icon-s-custom" v-model="pForm.permission"></el-input>
        </el-form-item>
        <el-form-item label="权限名" label-width="120px" prop="permissionName">
          <el-input prefix-icon="el-icon-notebook-2" v-model="pForm.permissionName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="showForm=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import permissionApi from "@/api/permission/permission";

export default {
  name: "PermissionController",
  data() {
    return {
      showForm:false,
      insertLoading:false,
      permissionList:[],
      pForm:{
        id:0,
        permission:"",
        permissionName:"",
        // 1 编辑  /  0 添加
        method:0,
      },

    }
  },
  methods: {

    handleClickEditor(row){
      this.showForm=true
      this.pForm.id=row.id
      this.pForm.permission=row.permission
      this.pForm.permissionName=row.permissionName
      this.pForm.method=1
    },
    handleClickInsert(){
      this.showForm=true
      this.pForm.permission=""
      this.pForm.permissionName=""
      this.pForm.method=0
    },
    getAll(){
      permissionApi.getAll().then(resp=>{
        if(resp.code === 200){
          this.permissionList=resp.data
        }
      })
    },
    init(){
      this.showForm=false
      this.$refs.form.resetFields()
      this.getAll()
    },
    insert(){
      this.insertLoading=true
      let insert={

        permission:this.pForm.permission,
        permissionName: this.pForm.permissionName,
      }
      permissionApi.insert(insert).then(resp=>{
        if(resp.code===200){
          this.init()

          this.$message.success("添加成功")
        }else{
          this.$message.error("添加失败")
        }
        this.insertLoading=false
      })
    },
    update(){
      this.insertLoading=true


      let update={
        id:this.pForm.id,
        permission:this.pForm.permission,
        permissionName: this.pForm.permissionName,
      }
      permissionApi.update(update).then(resp=>{
        if(resp.code === 200){
          this.init()
          this.$message.success("修改成功")
        }else{
          this.$message.error("修改失败")
        }
        this.insertLoading=false
      })
    },
    onSubmit(){

      if(this.pForm.method===0){
        this.insert()
      }else{
        this.update()
      }
    }
  },
  mounted() {
    this.getAll()
  }
}
</script>

<style scoped lang="less">

</style>